<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./css/seatLog.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/element-ui/2.9.2/theme-chalk/index.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
</head>
<body>
<div id="app" v-loading="loading">
    <el-form :inline="true" :inline="true" :model="queryParams" label-position="right" label-width="80px"
             ref="dataFormRef"
             size="small ">
        <el-form-item label="姓名" prop="userName">
            <el-input placeholder="姓名" style="width: 100px;margin-right: 35px"
                      v-model="queryParams.userName"></el-input>
        </el-form-item>
        <el-form-item label="座位号" prop="seatName" style="margin-left: 15px">
            <el-input placeholder="座位号" style="width: 100px;" v-model="queryParams.seatName"></el-input>
        </el-form-item>
        <el-form-item label="ip" prop="ip">
            <el-input placeholder="ip" style="width: 120px" v-model="queryParams.ip"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="beginTime">
            <el-date-picker placeholder="选择日期" style="width: 150px" type="date" v-model="queryParams.beginTime"
            ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
            <el-date-picker placeholder="选择日期" style="width: 150px" type="date" v-model="queryParams.endTime"
            ></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button @click="searchForm" type="primary">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
            <el-button @click="dialogFormVisible=true">导出</el-button>
        </el-form-item>
    </el-form>
    <el-table
            :data="tableData"
            :default-sort="{prop: 'date', order: 'descending'}"
            @sort-change="tableSortChange"
            style="width: 100%">
        <el-table-column
                label="序号"
                type="index">
        </el-table-column>
        <el-table-column
                label="姓名"
                prop="userName"
                sortable="custom">
        </el-table-column>
        <el-table-column
                label="座位号"
                prop="seatName"
                sortable="custom">
        </el-table-column>
        <el-table-column
                :formatter="dateFormatter"
                label="开始时间"
                prop="beginTime"
                sortable="custom"
                width="180px">
        </el-table-column>
        <el-table-column
                :formatter="dateFormatter"
                label="结束时间"
                prop="endTime"
                sortable="custom"
                type="date"
                width="180px">
        </el-table-column>
        <el-table-column
                label="使用时间(单位分钟)"
                prop="useTime"
                sortable="custom"
                width="170px">
        </el-table-column>
        <el-table-column
                label="ip"
                prop="ip"
                sortable="custom">
        </el-table-column>
    </el-table>
    <el-pagination
            :current-page="listQuery.currentPage"
            :page-size="listQuery.pageSize"
            :page-sizes="[5, 10, 20, 40]"
            :total="listQuery.total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!--导出对话框-->
    <el-dialog :visible.sync="dialogFormVisible" title="导出设置">
        <el-form :inline="true" :inline="true" :model="exportOptions" label-position="right" label-width="80px"
                 ref="exportFormRef"
                 size="small ">
            <el-form-item label="姓名" prop="userName">
                <el-input placeholder="姓名" style="width: 100px;margin-right: 35px"
                          v-model="exportOptions.userName"></el-input>
            </el-form-item>
            <el-form-item label="座位号" prop="seatName" style="margin-left: 15px">
                <el-input placeholder="座位号" style="width: 100px;" v-model="exportOptions.seatName"></el-input>
            </el-form-item>
            <el-form-item label="ip" prop="ip">
                <el-input placeholder="ip" style="width: 120px" v-model="exportOptions.ip"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" prop="beginTime">
                <el-date-picker placeholder="选择日期" style="width: 150px" type="date" v-model="exportOptions.beginTime"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
                <el-date-picker placeholder="选择日期" style="width: 150px" type="date" v-model="exportOptions.endTime"
                ></el-date-picker>
            </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button @click="exportDownload" type="primary">确 定</el-button>
        </div>
    </el-dialog>
</div>
<!-- 引入组件库 -->
<script src="http://cdn.staticfile.org/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.9.2/index.js"></script>
<script src="https://cdn.staticfile.org/axios/0.20.0/axios.min.js"></script>
<script src="./js/seatLog.js"></script>

</body>
</html>
